<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<c:import url="/pages/common-pages/head.jsp" /> 

</head>

<body>
	
	<c:import url="/pages/common-pages/header.jsp" /> 
<br><br>
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
      	<br>
        <h2></h2>

      </div>
    </div>    

    <div class="container">
      <h2>Cadastro de Usuarios</h2>
    
        <s:if test="%{mensagemDeSucesso != null && mensagemDeSucesso != ''}"> 
             <div class="alert alert-sucess">
                   <s:label value="%{mensagemDeSucesso}"></s:label>
              </div>
         </s:if>
         <s:if test="%{mensagemDeFalha != null && mensagemDefalha != ''}"> 
             <div class="alert alert-sucess">
                   <s:label value="%{mensagemDeFalha}"></s:label>
              </div>
         </s:if>
         <s:if test="hasActionErrors() || hasFieldErrors()"> 
             <div class="alert alert-danger">          
                 <s:fielderror/>                        
                 <s:actionerror/>                        
             </div> 
         </s:if>

		<!--TODO: Alterar a form para struts form OU botao de submit, dessa maneira nao esta indo as informacoes -->
		<s:form role="form" theme="simple" validate="true" action="publico_Usuario_cadastrarUsuario_formularioDeCadastroDeUsuarios">
		  	<div class="form-group">
			    <s:label for="usuario.nome">Nome</s:label>
			    <s:textfield name="usuario.nome" cssClass="form-control" value="%{usuario.nome}"/>
		  	</div>
		  	<div class="form-group">
			    <label for="inputDeEmail">E-mail</label>
			    <s:textfield name="usuario.email" id="inputDeEmail" cssClass="form-control"/>
		  	</div>
		  	<div class="form-group">
			    <label for="inputDeCidade">Cidade</label>
			    <s:textfield name="usuario.cidade" id="inputDeCidade" cssClass="form-control"/>
		  	</div>
		  	<div class="form-group">
			    <label for="inputDeLogin">Login</label>
			    <s:textfield name="usuario.login" id="inputDeLogin" cssClass="form-control"/>
		  	</div>
		  	
		  	<div class="form-group">
			    <s:label for="inputDeSenha" key="usuario.form.Senha"></s:label>
			    <s:password id="inputDeSenha" cssClass="form-control" onkeyup="funcaoDeValidacaoDeSenha()"/>
			    
		  	</div>
		  	<div class="form-group">
			    <s:label for="inputDeConfirmacaoDeSenha" key="usuario.form.ConfirmeSenha"></s:label>
			    <s:password cssClass="form-control" id="inputDeConfirmacaoDeSenha" name="usuario.senha" onkeyup="funcaoDeValidacaoDeSenha()"/>
			    <span id="mensagemDeConfirmacao" class="confirmMessage"></span>
		  	</div>
		  	<s:submit cssClass="btn btn-success" value="Cadastrar" ></s:submit>
		</s:form>


      <hr>

      <c:import url="/pages/common-pages/footer.jsp" />
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    
</body>
<script>
				function funcaoDeValidacaoDeSenha()
				{
				    
				    var senha = document.getElementById("inputDeSenha");
				    var confirmacaoDeSenha = document.getElementById("inputDeConfirmacaoDeSenha");

				    var mensagem = document.getElementById("mensagemDeConfirmacao");

				    var sucesso = "#66cc66";
				    var falha = "#ff6666";

				    if(senha.value == confirmacaoDeSenha.value)
				    {
				        confirmacaoDeSenha.style.backgroundColor = sucesso;
				        mensagem.style.color = sucesso;
				        mensagem.innerHTML = "Senhas sao equivalentes.";
				    }
				    else
				    {
				        confirmacaoDeSenha.style.backgroundColor = falha;
				        mensagem.style.color = falha;
				        mensagem.innerHTML = "Senhas nao sao equivalentes!";
				    }
				}
		</script>
</html>
